<template>
  <div class="header">
      <span @click="activePulldwon"></span>
      <transition name="slideInRight">
        <pulldown v-if="pulldownActive"></pulldown>
      </transition>
  </div>
  
</template>

<script>
import pulldown from '@/components/Pulldown'
export default {
  name: 'header',
  components: {pulldown},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      pulldownActive: false
    }
  },
  methods: {
    activePulldwon () {
      this.pulldownActive = !this.pulldownActive
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        opacity: 0
    }

    .slideInRight-enter-active {
        animation: slideInRight .5s;
    }
    .slideInRight-leave-active {
        animation: slideInRight .5s reverse;
    }

    .slideInRight {
        animation-name: slideInRight;
    }

    
    @keyframes slideInRight {
        from {
            transform: translate3d(100%, 0, 0);
            // visibility: visible;
        }

        to {
            transform: translate3d(0, 0, 0);
        }
    }


    .header {
        position: relative;
        background-color: #fff;
        height: 30px;
        padding: 10px 0;
        background: url("http://ocibsxdcx.bkt.clouddn.com/temp/1497519437.png") no-repeat;
        background-size: contain;
        background-origin: content-box;
        background-position: center;
        
        span {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            width: 22px;
            height: 22px;
            background: url("http://os6qw9n8e.bkt.clouddn.com/pulldown.png") no-repeat;
            background-size: contain;
            background-position: center;

        }

    }
</style>
